import React from "react";
import {Card, WhiteSpace, Button} from "antd-mobile";
import PropTypes from "prop-types";
import {Link} from "react-router-dom";
import "../home.css";

class ParkLots extends React.Component {
    // eslint-disable-next-line react/no-deprecated
    async componentWillMount() {
        // eslint-disable-next-line react/prop-types
        await this.props.findAllParklots();
    }

    render() {
        return (
            <div className={"home"}>
                <div>
                    <WhiteSpace size="lg"/>
                    {this.props.parklots.map((parklot) =>
                        <Card key={parklot.id} parklot={parklot} full>
                            <Card.Header
                                title={parklot.name}
                                extra={<div><span className={"park_type"}>{parklot.parkingLotType}</span><span
                                    className={"park_price"}>￥{parklot.unitPrice}/小时</span></div>}
                            />
                            <Card.Body>
                                <div>
                                    <span className={"park_address"}>{parklot.address}</span>
                                    <span className={"park_num"}>总车位：{parklot.capacity}</span>
                                </div>
                            </Card.Body>
                            <Card.Footer content={<span className={"park_grade"}/>}
                                extra={
                                    <div>
                                        <Link to={"/reserveStall/" + parklot.id}>
                                            <Button inline size="small" style={{marginRight: "4px"}}>
                                                预约停车
                                            </Button>
                                        </Link>
                                    </div>}/>
                        </Card>
                    )}
                </div>
            </div>
        );
    }
}

ParkLots.propTypes = {
    parklots: PropTypes.array.isRequired
};
export default ParkLots;